<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="工单审批" data-page-identification="g_z4l2lbp3aq">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_ut7t6yqnui 面包屑_ytuqp6m1hr -->
      <a-breadcrumb class="vid_ut7t6yqnui" style="word-break: break-word">
        <a-breadcrumb-item v-for="(item, index) in vid_ut7t6yqnui_props_tabConfig" :key="index" @click="handleBreadcrumbJump(router, item)" href="">
          <template v-if="vid_ut7t6yqnui_props.rt_showIcon">
            <span v-if="/^(https?:|mailto:|tel:|data:image)/.test(item.icon)" role="img" class="anticon"><embed style="width: 1em;height:1em;" :src="item.icon" /></span>
            <component v-else :is="item.icon" />
          </template>
          {{item.title}}
        </a-breadcrumb-item>
      </a-breadcrumb>
      <!-- end vid_ut7t6yqnui 面包屑_ytuqp6m1hr -->
      <!-- begin vid_5rd632dfps 自定义模板_18qri6kb8t -->
      <a-modal :visible="reasonVisible" title="驳回原因" centered :footer="null" @cancel="reasonVisible = false">
        {{ reason }}
      </a-modal>
      <!--          批量通过/通过/驳回/撤销-->
      <a-modal
        :visible="approveState.approveModalVisible"
        :title="approveState.approveModalTitle"
        centered
        @ok="handleConfirmApprove"
        @cancel="handleCancelApprove"
        :ok-button-props="{
                    loading: approveState.approveBtnLoading
                }"
      >
        <div v-if="approveState.approveModalTitle === '批量审批通过'"> 已选择{{ allDailyId.length }}个审批事项,是否全部审批通过？ </div>
        <div v-else-if="approveState.approveModalTitle === '审批驳回'">
          <a-textarea v-model:value="approveState.approveRemark" :row="4" placeholder="请输入驳回原因" />
        </div>
        <div v-else-if="approveState.approveModalTitle === '审批通过'">
          <a-textarea v-model:value="approveState.approveRemark" :row="4" placeholder="请输入备注" />
        </div>
      </a-modal>
      <!--          通过/驳回/撤销-->
      <a-modal
        title="审批详情"
        :visible="iframShow"
        width="100vw"
        :body-style="{
                    height: '800px'
                }"
        style="top: 0"
        @cancel="approveStatusCancel"
        centered
        ok-text="通过"
        cancel-text="驳回"
        :ok-button-props="{ loading: approveBtnLoading }"
      >
        <template #footer>
          <a-button type="primary" v-if="activeKey === '待办事项'" @click="handlePass(null)">通过</a-button>
          <a-button type="primary" v-if="activeKey === '待办事项'" @click="handleReject(null)">驳回</a-button>
          <a-button type="primary" v-if="activeKey === '我发起的' && approveState.currentApprove.processStatus === 'IN_PROCESS'" @click="handleRevoke(null)">撤销</a-button>
          <a-button type="primary" v-if="activeKey === '我发起的' && approveState.currentApprove.processStatus === 'IN_PROCESS'" @click="handleReminder(null)">催办</a-button>
        </template>
        <div class="detail-content">
          <div class="detail-left">
            <iframe id="myIframe" :src="showUrl" allowfullscreen height="100%" width="100%"></iframe>
          </div>
          <div class="detail-right">
            <div class="flow-path">流程日志</div>
            <!--                    <div class="title-new-status">-->
            <!--                        <div class="left-title">审批类型:{{ statuState.list.processName }}</div>-->
            <!--                        <div class="right-title">审批提交时间:{{ statuState.list.createdDate }}</div>-->
            <!--                    </div>-->
            <a-steps class="status-step" direction="vertical">
              <a-step v-for="(inside, index) in statuState.list.processTaskList" :status="getIconStatus(inside.assignStatus)">
                <template #title>
                  <div v-if="inside.taskName">
                    <CheckCircleFilled style="color: #52c41a" v-if="inside.assignResult === 'APPROVE'" />
                    <CloseCircleFilled v-if="inside.assignResult === 'REJECT'" style="color: #ff4d4f" />
                    {{
                                            getTextStatus(inside.assignResult) + inside.taskName === '结束节点'
                                                ? inside.taskName
                                                : inside.taskName + ':' + inside.assignUserName
                    }}
                  </div>
                  <div v-else> 系统 </div>
                </template>
                <template #description>
                  <div>
                    {{ inside.lastModifiedDate }}
                  </div>
                  <div>
                    {{ inside.assignRemark }}
                  </div>
                </template>
              </a-step>
            </a-steps>
          </div>
        </div>
      </a-modal>
      <div class="body">
        <a-tabs v-model:activeKey="activeKey" size="large" @change="activeChange">
          <a-tab-pane key="待办事项">
            <!--                        <template #tab>待办事项({{ approveState.countDara.todoCount }})</template>-->
            <template #tab>待办事项</template>
          </a-tab-pane>
          <a-tab-pane key="已办事项">
            <!--                        <template #tab>已办事项({{ approveState.countDara.doneCount }})</template>-->
            <template #tab>已办事项</template>
          </a-tab-pane>
          <a-tab-pane key="我发起的">
            <!--                        <template #tab>我发起的({{ approveState.countDara.createCount }})</template>-->
            <template #tab>我发起的</template>
          </a-tab-pane>
          <a-tab-pane key="抄送我的">
            <!--                        <template #tab>抄送我的({{ approveState.countDara.ccCount }})</template>-->
            <template #tab>抄送我的</template>
          </a-tab-pane>
        </a-tabs>
        <div class="top-tag-container">
          <div class="cover" v-if="tagsData.length > 0"></div>
          <div class="cover1" v-if="tagsData.length > 0"></div>
          <div class="top-tag" v-if="tagsData.length > 0">
            <a-checkable-tag v-for="(tag, index) in tagsData" :key="tag.title" :checked="selectedTag === tag" @change="checked => handleChange(tag, checked)" :class="{ sticky: index === 0 }">
              {{ tag.processName }}({{ tag.count }})
            </a-checkable-tag>
          </div>
        </div>
        <!--                <div class="determine-div" v-if="activeKey === '我发起的' || activeKey === '已办事项'">-->
        <!--                    <a-tabs v-model:activeKey="innerActiveKey" type="card" @change="innerTabChange">-->
        <!--                        <a-tab-pane key="" tab="全部" />-->
        <!--                        <a-tab-pane key="APPROVED" tab="已通过" />-->
        <!--                        <a-tab-pane key="REJECT" tab="已驳回" />-->
        <!--                        <a-tab-pane v-if="activeKey === '我发起的'" key="REVOKE" tab="已撤销" />-->
        <!--                    </a-tabs>-->
        <!--                </div>-->
        <a-spin :spinning="mainLoading" tip="请稍等...">
          <div class="main">
            <div class="no-data-img" v-if="approveState.approveData.length == 0">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="265px" height="192px" viewBox="0 0 265 192" version="1.1">
                <title>暂无待办事项</title>
                <defs>
                  <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-1">
                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                    <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-2">
                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                    <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-3">
                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                    <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="50%" y1="50%" x2="50%" y2="-4.79965365%" id="linearGradient-4">
                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                    <stop stop-color="#3875FF" stop-opacity="0.1" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-5">
                    <stop stop-color="#9CBEF7" offset="0%" />
                    <stop stop-color="#96D1F7" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-6">
                    <stop stop-color="#9CBEF7" offset="0%" />
                    <stop stop-color="#96D1F7" offset="100%" />
                  </linearGradient>
                </defs>
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="审批管理-暂无待办事项" transform="translate(-927, -470)">
                    <g id="暂无待办事项" transform="translate(927, 470)">
                      <g id="编组-69备份-3备份-3" fill-rule="nonzero">
                        <path
                          d="M30.4,70.4 C38.3897145,70.4 44.9396432,76.4022329 45.5530639,84.0283112 C45.8323774,84.0092712 46.1150286,84 46.4,84 C53.027417,84 58.4,89.0144112 58.4,95.2 C58.4,101.385589 53.027417,106.4 46.4,106.4 C46.1313282,106.4 45.8647188,106.391759 45.6004459,106.375534 L45.6,107.2 L8.8,107.2 L8.80006856,105.99739 C3.72613437,104.690379 0,100.351322 0,95.2 C0,89.0144112 5.372583,84 12,84 C13.1159648,84 14.1963502,84.1421776 15.2214963,84.4081848 C15.6437054,76.6027782 22.2779069,70.4 30.4,70.4 Z"
                          id="形状结合备份"
                          fill="url(#linearGradient-1)"
                        />
                        <path
                          d="M174.4,35.2 L174.400166,35.1009906 C168.085987,34.3137074 163.2,28.9274454 163.2,22.4 C163.2,15.3307552 168.930755,9.6 176,9.6 C177.223344,9.6 178.406604,9.77161808 179.527019,10.0920919 C181.87653,4.17968127 187.650157,0 194.4,0 C202.141022,0 208.598072,5.49733733 210.080147,12.8010091 C216.449395,12.8415186 221.6,17.8400063 221.6,24 C221.6,30.0561716 216.621551,34.98966 210.40049,35.1934501 L210.4,35.2 L174.4,35.2 Z"
                          id="形状结合"
                          fill="url(#linearGradient-2)"
                          transform="translate(192.4, 17.6) scale(-1, 1) translate(-192.4, -17.6)"
                        />
                        <path
                          d="M242.8,47.2 C247.491543,47.2 251.362882,50.7117164 251.928816,55.249951 C252.214523,55.2167339 252.505192,55.2 252.8,55.2 C256.77645,55.2 260,58.2444637 260,62 C260,65.7555363 256.77645,68.8 252.8,68.8 C252.529676,68.8 252.262831,68.7859302 252.000242,68.7585236 L252,69.6 L229.6,69.6 L229.600068,68.6315132 C226.393652,67.9443906 224,65.2361993 224,62 C224,58.2444637 227.22355,55.2 231.2,55.2 C232.054514,55.2 232.874259,55.3405911 233.634718,55.5986176 C234.040539,50.892793 237.989021,47.2 242.8,47.2 Z"
                          id="形状结合备份-2"
                          fill="url(#linearGradient-3)"
                        />
                        <g id="编组-50" transform="translate(1.6, 76.8)">
                          <ellipse id="椭圆形" fill="url(#linearGradient-4)" cx="131.6" cy="57.6" rx="131.6" ry="57.6" />
                          <g id="编组-46" transform="translate(30.4, 4.8)">
                            <rect id="矩形" fill="#D7E3FF" x="6.4" y="20" width="2.4" height="12" />
                            <path
                              d="M8.4,21.5460356 C25.469423,21.5460356 11.8000002,-1.42108547e-14 8.4,-1.42108547e-14 C4.99999998,-1.42108547e-14 -8.66942296,21.5460356 8.4,21.5460356 Z"
                              id="椭圆形"
                              fill="#EAF0FF"
                            />
                          </g>
                          <g id="编组-46备份-2" transform="translate(218.4, 4.8)">
                            <rect id="矩形" fill="#D7E3FF" x="4.97664" y="13.824" width="1.65888" height="8.2944" />
                            <path
                              d="M5.80608,14.8926198 C17.6044651,14.8926198 8.15616008,-9.8225428e-15 5.80608,-9.8225428e-15 C3.45599989,-9.8225428e-15 -5.99230512,14.8926198 5.80608,14.8926198 Z"
                              id="椭圆形"
                              fill="#EAF0FF"
                            />
                          </g>
                          <g id="编组-46备份" transform="translate(245.6, 21.6)">
                            <rect id="矩形" fill="#D7E3FF" x="3.6" y="10" width="1.2" height="6" />
                            <path
                              d="M4.2,10.7730178 C12.7347114,10.7730178 5.90000008,-7.10542736e-15 4.2,-7.10542736e-15 C2.5,-7.10542736e-15 -4.33471146,10.7730178 4.2,10.7730178 Z"
                              id="椭圆形"
                              fill="#EAF0FF"
                            />
                          </g>
                        </g>
                      </g>
                      <g id="编组-61" transform="translate(89.6, 21.6)">
                        <ellipse id="椭圆形" fill="#E2EBFF" fill-rule="nonzero" cx="42.8" cy="80" rx="42.8" ry="4.8" />
                        <rect id="矩形备份-91" fill="url(#linearGradient-5)" x="5.6" y="0" width="70.4" height="80.8" rx="3.2" />
                        <g id="编组-60" transform="translate(20.8, 28)" fill="#FFFFFF" fill-rule="nonzero">
                          <rect id="矩形" x="0" y="0" width="40" height="3.2" rx="1.6" />
                          <rect id="矩形备份-92" x="0" y="15.2" width="40" height="3.2" rx="1.6" />
                          <rect id="矩形备份-93" x="0" y="30.4" width="40" height="3.2" rx="1.6" />
                        </g>
                        <path
                          d="M21.6,0 L60.7346814,0 L55.7992343,8.40508424 C55.6555754,8.64973584 55.393086,8.8 55.1093744,8.8 L27.225307,8.8 C26.9415954,8.8 26.6791059,8.64973584 26.535447,8.40508424 L21.6,0 L21.6,0 Z"
                          id="矩形"
                          fill="#FFFFFF"
                          fill-rule="nonzero"
                        />
                        <rect id="矩形备份-94" fill="url(#linearGradient-6)" x="29.6" y="0" width="23.2" height="3.2" rx="1.6" />
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
              <div class="no-data-msg">暂无{{ activeKey }}</div>
            </div>
            <!-- 显示项目类型标题 -->

            <div
              class="type-title"
              v-if="
                                (selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000001' ||
                                    selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000002') &&
                                activeKey === '待办事项'
                            "
            >
              <a-checkbox style="margin-top: 10px" v-model:checked="checked" @change="handleCheckAllDaily(group)">全选</a-checkbox>
              <div class="sub-daily" @click="batchApproval">批量通过</div>
            </div>
            <div v-for="item in approveState.approveData" :key="item.processInstanceId" class="item">
              <div class="item-top">
                <div class="sub-time">
                  <span class="default-font">审批类型：</span>
                  <span class="weight-font">{{ item.processName }}</span>
                </div>
                <div class="sub-time">
                  <span class="default-font">申请时间：</span>
                  <span class="weight-font">{{ item.createdDate }}</span>
                </div>
                <div class="sub-people">
                  <span class="default-font">申请人：</span>
                  <span class="weight-font">{{ item.createdByName }}</span>
                </div>
                <div
                  class="approve-status"
                  v-if="
                                        activeKey === '我发起的' || activeKey === '已办事项' || activeKey === '抄送我的'
                                    "
                >
                  <div v-if="item.processStatus === 'IN_PROCESS'" class="in-progress">审批中</div>
                  <div v-if="item.processStatus === 'APPROVED'" class="approved">已通过</div>
                  <div v-if="item.processStatus === 'REJECT'" class="reject">被驳回</div>
                  <div v-if="item.processStatus === 'REVOKE'" class="revoke">已撤销</div>
                  <div v-if="item.processStatus === 'END'" class="reject">已结束</div>
                </div>
                <div class="urging" v-if="item.urge">催办</div>
              </div>
              <div class="item-inner">
                <a-checkbox
                  v-if="
                                        (selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000001' ||
                                            selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000002') &&
                                        activeKey === '待办事项'
                                    "
                  style="margin-top: 10px; margin-right: 16px"
                  @change="itemCheck(item)"
                  v-model:checked="item.selected"
                />

                <div v-for="field in item.fields" :key="field.title" class="item-content">
                  <span class="item-title">{{ field.title }}</span>
                  <a-tooltip>
                    <template #title>{{ field.value }}</template>
                    <span :class="field.class" class="item-main" :id="field.id">{{
                                            field.value
                    }}</span>
                  </a-tooltip>
                </div>
                <div class="detail-batch">
                  <a-space v-if="activeKey === '待办事项'">
                    <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                    <div class="pass-btn" @click="() => handlePass(item)">通过</div>
                    <div class="reject-btn" @click="handleReject(item)">驳回</div>
                  </a-space>
                  <a-space v-if="activeKey === '我发起的'">
                    <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                    <div class="reject-btn" v-if="item.processStatus === 'REJECT'" @click="handleGetReason(item)">驳回原因</div>
                    <div class="urg-btn" v-if="item.processStatus === 'IN_PROCESS'" @click="handleReminder(item)">催办</div>
                    <div class="reject-btn" v-if="item.processStatus === 'IN_PROCESS'" @click="handleRevoke(item)">撤销</div>
                  </a-space>
                  <a-space v-if="activeKey === '已办事项'">
                    <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                    <div class="reject-btn" v-if="item.processStatus === 'REJECT'" @click="handleGetReason(item)">驳回原因</div>
                  </a-space>
                  <a-space v-if="activeKey === '抄送我的'">
                    <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                    <div class="reject-btn" v-if="item.processStatus === 'REJECT'" @click="handleGetReason(item)">驳回原因</div>
                  </a-space>
                </div>
              </div>
              <!-- 操作部分 -->
            </div>
          </div>
        </a-spin>
      </div>

      <!-- end vid_ymq5ravira 自定义模板_imy6jgazxy -->
      <div class="pagination-div">
        <a-pagination v-model:current="pagination.current" :total="pagination.total" :page-size="pagination.pageSize" @show-size-change="pageSizeChange" @change="pageChange" />
      </div>
      <!-- end vid_5rd632dfps 自定义模板_18qri6kb8t -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');

    const vid_ut7t6yqnui_props = reactive({
          rt_showIcon: false,
  })



      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */
  const vid_ut7t6yqnui_props_tabConfig = computed(() => {
   const initValue = [{"key":"tab1","title":"工单管理","targetPage":{"settingType":"PAGE_LIST","url":"/app_50000005/page/3000000784","customUrl":"","modelId":3000000784,"parameter":[]},"icon":"","parameter":[],"applicationId":50000005,"query":{}},{"key":"tab2","title":"审批管理","icon":"","targetPage":{"settingType":"","url":"","customUrl":""},"parameter":[],"applicationId":50000005,"query":{}}];
  return initValue;
  })
  
  systemStore.addBreadcrumbInfo(vid_ut7t6yqnui_props_tabConfig.value);
  
  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  // 审批管理数据
      const pageSizeChange = (current, size) => {
          pagination.value.current = current
          pagination.value.pageSize = size
          getApproveData()
      }
      const pageChange = (page, pageSize) => {
          pagination.value.current = page
          pagination.value.pageSize = pageSize
          getApproveData()
      }
      const pagination = ref({
          current: 1,
          pageSize: 20,
          showSizeChanger: true,
          total: '0',
          pageSizeOptions: ['20', '40', '60', '80', '100'],
          showTotal: total => `共 ${total} 条数据`
      })

      const activeKey = ref('待办事项')
      const innerActiveKey = ref('')
      const tagsData = ref([])
      const selectedTag = ref({})
      const checkName = ref('')
      const handleChange = (tag, checked) => {
          if (checked) {
              checkName.value = tag.processName
              selectedTag.value = tag
              getApproveData()
          } else {
              selectedTag.value = {}
          }
      }
      onMounted(async () => {
          getCount()
          getTagData()
      })
      const mainLoading = ref(false)
      const approveState = reactive({
          countDara: {},
          approveData: [],
          currentApprove: {},
          approveModalTitle: '',
          approveModalVisible: false,
          approveRemark: '',
          approveBtnLoading: false
      })

      const checked = ref(false)
      const allDailyId = ref([])
      function handleCheckAllDaily() {
          allDailyId.value = []
          if (checked.value) {
              approveState.approveData.forEach(item => {
                  item.selected = true
              })
              allDailyId.value = approveState.approveData.map(item => {
                  return {
                      processInstanceId: item.processInstanceId,
                      taskId: item.taskId
                  }
              })
          } else {
              approveState.approveData.forEach(item => {
                  item.selected = false
              })
              allDailyId.value = []
          }
      }
      // 单选
      function itemCheck(item) {
          if (item.selected) {
              allDailyId.value.push({
                  processInstanceId: item.processInstanceId,
                  taskId: item.taskId
              })
          } else {
              const index = allDailyId.value.findIndex(
                  i => i.processInstanceId === item.processInstanceId && i.taskId === item.taskId
              )
              if (index !== -1) {
                  allDailyId.value.splice(index, 1)
              }
          }
      }

      watch(
          () => allDailyId.value,
          () => {
              if (allDailyId.value.length == approveState.approveData.length) {
                  checked.value = true
              } else {
                  checked.value = false
              }
          },
          { deep: true }
      )
      //     详情
      function handleGetDetail(item) {
          approveState.currentApprove = item
          let currentUrl = window.location.origin
          // currentUrl = 'http://asa-qa.allintechinc.com'
          let endUrl = formatUrl(item.currentNode.pageConfig.urlPc)
          showUrl.value = `${currentUrl}/${endUrl}?processInstanceId=${item.processInstanceId}`
          // showUrl.value = `http://asa-qa.allintechinc.com/app_50000005/process/70352ff9-3780-11ef-83e9-52a5438c6e27/startNode1/MyInitiated`;
          iframShow.value = true
          getApproveStatus(item.processInstanceId, item.taskId)
      }
      const reasonVisible = ref(false)
      const reason = ref('')
      // 驳回原因
      function handleGetReason(item) {
          get(`/workflow-platform/api/v1/process_instance/detail/${item.processInstanceId}/${item.taskId} `).then(
              data => {
                  let reasonItem = data.data.processTaskList.find(item => item.assignResult === 'REJECT')
                  reason.value = reasonItem.assignRemark
                  reasonVisible.value = true
              }
          )
      }
      const getIconStatus = status => {
          if (status === 'HANDLED' || status === 'SIPED') {
              return 'finish'
          } else if (status === 'WAIT_HANDLE') {
              return 'wait'
          } else {
              return 'finish'
          }
      }
      const getTextStatus = text => {
          if (text == 'CC') {
              return '(抄送)'
          } else {
              return ''
          }
      }
      const getResult = item => {
          console.log(item)
          if (item.taskName === '结束节点') {
              return '结束节点'
          } else {
              return item.taskName + item.assignUserName
          }
      }

      // 查流程日志
      const statuState = reactive({
          visible: true,
          list: []
      })
      function getApproveStatus(id, type) {
          get(`/workflow-platform/api/v1/process_instance/detail/${id}/${type} `).then(data => {
              statuState.list = data.data
          })
      }
      function formatUrl(url) {
          // 检查是否已经是完整的URL
          if (url.startsWith('app_')) {
              return url
          } else {
              // 如果不是，则补全前缀
              return `app_50000005/page/${url}`
          }
      }
      function iframCancel() {
          approveState.approveModalTitle = '审批驳回'
          approveState.approveModalVisible = true
      }
      const keyMapping = {
          '待办事项': 'todo',
          '已办事项': 'done',
          '我发起的': 'myCreate',
          '抄送我的': 'cc'
      }

      const mappedActiveKey = computed(() => keyMapping[activeKey.value])
      // 通过
      // function handlePass(item) {
      //     mainLoading.value = true
      //
      // }
      // 驳回
      function handleReject(item) {
          if (item) {
              approveState.currentApprove = item
          }
          approveState.approveModalTitle = '审批驳回'
          approveState.approveModalVisible = true
      }
      // 通过
      function handlePass(item) {
          if (item) {
              approveState.currentApprove = item
          }
          approveState.approveModalTitle = '审批通过'
          approveState.approveModalVisible = true
      }
      //     催办
      function handleReminder(item) {
          if (item) {
              approveState.currentApprove = item
              if (approveState.currentApprove.urge) {
                  message.info('该审批已经催办了！')
                  return
              }
          }

          mainLoading.value = true
          put(`/workflow-platform/api/v1/process_instance/urge/${approveState.currentApprove.processInstanceId}`)
              .then(data => {
                  message.success('已为您催办')
                  iframShow.value = false
              })
              .catch(e => {
                  message.error(e.errorMsg)
              })
              .finally(() => {
                  mainLoading.value = false
              })
      }
      //     撤销
      function handleRevoke(item) {
          if (item) {
              approveState.currentApprove = item
          }
          mainLoading.value = true
          put(`/workflow-platform/api/v1/process_instance/revoke/${approveState.currentApprove.processInstanceId}`, {
              revokeReason: '撤销'
          })
              .then(data => {
                  iframShow.value = false
                  message.success('已为您撤销')
                  getTagData()
                  getCount()
              })
              .catch(e => {
                  message.error(e.errorMsg)
              })
              .finally(() => {
                  mainLoading.value = false
              })
      }
      // 批量通过
      function batchApproval() {
          if (allDailyId.value.length == 0) {
              message.info('请全选或多选工时日报审批')
              return
          }
          approveState.approveModalTitle = '批量审批通过'
          approveState.approveModalVisible = true
      }
      // 确认审批
      function handleConfirmApprove() {
          if (approveState.approveModalTitle === '审批驳回') {
              approveState.approveBtnLoading = true
              put('/workflow-platform/api/v1/process_instance/task/approve', {
                  approveAction: 'REJECT',
                  approveRemark: approveState.approveRemark,
                  processInstanceId: approveState.currentApprove.processInstanceId,
                  taskId: approveState.currentApprove.taskId
              })
                  .then(data => {
                      if (data.errorMsg) {
                          message.error(data.errorMsg)
                      } else {
                          message.success('已驳回审批')
                          approveState.approveModalVisible = false
                          iframShow.value = false
                          showUrl.value = ''
                          getTagData()
                          getCount()
                      }
                  })
                  .catch(e => {
                      message.error(e.errorMsg)
                  })
                  .finally(() => {
                      approveState.approveBtnLoading = false
                  })
          } else if (approveState.approveModalTitle === '批量审批通过') {
              approveState.approveBtnLoading = true
              const params = {
                  taskList: allDailyId.value,
                  approveRemark: '批量审批',
                  approveAction: 'APPROVE'
              }
              put('/workflow-platform/api/v1/process_instance/task/approve/batch', params)
                  .then(data => {
                      if (data.errorMsg) {
                          message.error(data.errorMsg)
                      } else {
                          message.success('已通过批量审批')
                          approveState.approveModalVisible = false
                          getTagData()
                          getCount()
                          allDailyId.value = []
                          checked.value = false
                      }
                  })
                  .catch(e => {
                      message.error(e.errorMsg)
                  })
                  .finally(() => {
                      approveState.approveBtnLoading = false
                  })
          } else if (approveState.approveModalTitle === '审批通过') {
              approveState.approveBtnLoading = true
              put('/workflow-platform/api/v1/process_instance/task/approve', {
                  approveAction: 'APPROVE',
                  approveRemark: approveState.approveRemark,
                  processInstanceId: approveState.currentApprove.processInstanceId,
                  taskId: approveState.currentApprove.taskId
              })
                  .then(data => {
                      if (data.errorMsg) {
                          message.error(data.errorMsg)
                      } else {
                          message.success('已通过审批')
                          approveState.approveModalVisible = false
                          iframShow.value = false
                          showUrl.value = ''
                          getTagData()
                          getCount()
                      }
                  })
                  .catch(e => {
                      message.error(e.errorMsg)
                  })
                  .finally(() => {
                      mainLoading.value = false
                      approveState.approveBtnLoading = false
                  })
          }
      }
      // 取消审批
      function handleCancelApprove() {
          approveState.approveModalVisible = false
          approveState.approveRemark = ''
      }
      const iframShow = ref(false)
      const showUrl = ref('')
      // 获取顶部tag
      function getTagData() {
          selectedTag.value = null
          tagsData.value = []
          get(`/solution-ppm/api/v2/built-in-system-ppm/approve/classify/${mappedActiveKey.value}/WORK_ORDER`).then(
              data => {
                  if (data.code === 200) {
                      tagsData.value = data.data
                      if (checkName.value) {
                          const checkIndex = tagsData.value.find(item => item.processName === checkName.value)
                          if (checkIndex) {
                              selectedTag.value = checkIndex
                              getApproveData()
                          } else {
                              selectedTag.value = tagsData.value[0]
                              getApproveData()
                          }
                      } else {
                          selectedTag.value = tagsData.value[0]
                          getApproveData()
                      }
                  }
              }
          )
      }
      function approveStatusCancel() {
          iframShow.value = false
          approveState.approveRemark = ''
          approveState.currentApprove = {}
      }
      // 获取数量
      function getCount() {
          get('/workflow-platform/api/v1/process_instance/task/counter').then(data => {
              approveState.countDara = data.data
          })
      }
      const defaultMap = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' }
      ]
      const map1 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目负责人', field: 'plName' },
          { title: '产品经理', field: 'productLeaderName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map2 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '任务负责人', field: 'taskOwner' },
          { title: '审核员', field: 'assessorName' }
      ]
      const map3 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目总监', field: 'projectDirector' },
          { title: 'PMO', field: 'projectManagementOffice' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map4 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map5 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map6 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目总监', field: 'projectDirector' },
          { title: 'PMO', field: 'projectManagementOffice' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map7 = [{ title: '模板名称', field: 'templateName' }]
      const map8 = [
          { title: '行动项任务名称', field: 'actionTaskName' },
          { title: '任务负责人', field: 'taskOwner' },
          { title: '审核员', field: 'assessorName' },
          { title: 'PMO', field: 'projectManagementOffice' }
      ]
      const map9 = [{ title: '项目名称', field: 'projectName' }]
      const map10 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目类型', field: 'projectType' },
          { title: '团队负责人', field: 'teamLeader' },
          { title: '负责人', field: 'leader' }
      ]
      const map11 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map12 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map13 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '风险解决人', field: 'solver' }
      ]
      const map14 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目负责人', field: 'plName' },
          { title: '产品经理', field: 'productLeaderName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map15 = [
          { title: '工时对应时间', field: 'dailyDate' },
          { title: '项目名称', field: 'projectName' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '工时', field: 'workingHours' },
          { title: '风险描述', field: 'riskDescription' },
          { title: '解决方案', field: 'solution' }
      ]
      const map16 = [
          { title: '工时对应时间', field: 'dailyDate' },
          { title: '工作类型', field: 'workType' },
          { title: '工时', field: 'workingHours' }
      ]
      const map17 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目总监', field: 'projectDirector' },
          { title: '项目经理', field: 'pmName' },
          { title: 'PMO', field: 'projectManagementOffice' }
      ]
      // 新工单
      const map18 = [
          { title: '工单标题', field: 'content' },
          { title: '工单类型', field: 'type' },
          { title: '优先级', field: 'priority' },
          { title: '问题来源', field: 'questionSource' },
          { title: '解决人', field: 'solver' },
          { title: '提交时间', field: 'submitTime' }
      ]
      const map19 = [
          { title: '工时对应时间', field: 'dailyDate' },
          { title: '工单标题', field: 'content' },
          { title: '所属父工单标题', field: 'parentContent' },
          { title: '工时', field: 'workingHours' }
      ]
      // 映射关系
      const fieldMap = {
          // 平台/市场项目-新建
          work_flow_code_project00000001: map1,
          work_flow_code_project_00000003: map1,
          work_flow_code_project_00000005: map1,
          work_flow_code_platform_project_risk_close_00000001: map1,
          work_flow_code_task_pt_00000001: map2,
          work_flow_code_task_pt_00000002: map2,
          work_flow_code_task_00000001: map2,
          work_flow_code_task_modify_00000001: map2,
          work_flow_code_delivery_project_create_00000001: map3,
          work_flow_code_delivery_project_delete_00000001: map3,
          work_flow_code_delivery_project_update_00000001: map3,
          work_flow_code_delivery_project_risk_close_00000001: map3,
          work_flow_code_requirement_change_00000001: map3,
          'work_flow_code_create-milestones_00000001': map4,
          work_flow_code_create_work_flow_code_milepost_00000003: map4,
          work_flow_code_editing_milestone_00000001: map4,
          work_flow_code_create_task_00000001: map5,
          work_flow_code_task_00000002: map5,
          work_flow_code_task_recovery_00000001: map5,
          work_flow_code_task_switch_00000001: map5,
          'work_flow_code_project-template-create_00000001': map6,
          work_flow_code_project_template_delete_00000001: map6,
          work_flow_code_project_template_update_00000001: map6,
          work_flow_code_project_template_open_close_00000001: map6,
          work_flow_code_editing_milestone_00000002: map11,
          project_template_list_delete_00000001: map7,
          project_template_list_go_offline_00000001: map7,
          project_template_list_go_online_00000001: map7,
          work_flow_code_task_sa_00000001: map12,
          work_flow_code_action_task_edit_00000001: map8,
          work_flow_code_action_task_complete_00000001: map8,
          work_flow_code_risk_00000001: map13,
          work_flow_code_project_00000007: map14,
          work_flow_code_delete_work_week_evolve_00000001: map9,
          work_flow_code_edit_work_week_evolve_00000001: map9,
          work_flow_code_add_work_week_evolve_00000001: map9,
          'work_flow_code_platform_create-monthly-goals_00000001': map10,
          'work_flow_code_platform_delete-monthly-goals_00000001': map10,
          'work_flow_code_platform_editing-monthly-goals_00000001': map10,
          'work_flow_code_delivery_create-monthly-goals_00000001': map10,
          'work_flow_code_delivery_delete-monthly-goals_00000001': map10,
          'work_flow_code_delivery_editing-monthly-goals_00000001': map10,
          work_flow_code_daily_00000001: map15,
          work_flow_code_daily_00000002: map16,
          work_flow_code_collaborate_task_create_00000001: map17,
          work_flow_code_collaborate_task_update_00000001: map17,
          work_flow_code_collaborate_task_delete_00000001: map17,
          work_flow_code_collaborate_task_complete_00000001: map17,
          work_flow_code_task_batch_delay_00000001: map17,
          // 其他映射关系
          // 工单映射
          work_flow_code_work_order_resolved_00000001: map18,
          work_flow_code_work_order_no_need_handle_00000001: map18,
          work_flow_code_work_order_apply_circulation_00000001: map18,
          work_flow_code_work_order_daily_00000001: map19
      }
      // 为了计算反查类名
      const fieldMapReverse = {
          map1,
          map2,
          map3,
          map4,
          map5,
          map6,
          map7,
          map8,
          map9,
          map10,
          map11,
          map12,
          map13,
          map14,
          map15,
          map16,
          map17,
          map18,
          map19
      }
      const classMap = {
          map7: 'omit1',
          map9: 'omit2',
          map11: 'omit3',
          map16: 'omit3',
          map4: 'omit4',
          map17: 'omit4',
          map6: 'omit4',
          map8: 'omit4',
          map10: 'omit4',
          map12: 'omit4',
          map19: 'omit4',
          map13: 'omit4',
          map1: 'omit5',
          map3: 'omit5',
          map5: 'omit5',
          map14: 'omit5',
          map2: 'omit6',
          map18: 'omit6',
          map15: 'omit7'
      }
      // 获取数据
      const getApproveData = debounce(() => {
          approveState.approveData = []
          approveState.approveRemark = ''
          mainLoading.value = true

          post(`/solution-ppm/api/v2/built-in-system-ppm/approve/approve_list/${mappedActiveKey.value}`, {
              filter: {
                  processDefinitionRecordId: selectedTag.value?.processDefinitionRecordId
              },
              sort: {},
              pageNo: pagination.value.current,
              pageSize: pagination.value.pageSize
          })
              .then(data => {
                  if (data.code === 200) {
                      approveState.approveData = data.data.content.map(item => {
                          const fields = fieldMap[item.thirdProcessCode] || defaultMap
                          const fieldClassKey =
                              Object.keys(fieldMapReverse).find(key => fieldMapReverse[key] === fields) || ''
                          const fieldClass = classMap[fieldClassKey] || ''
                          return {
                              ...item,
                              fields: fields.map(field => ({
                                  title: field.title,
                                  value: item.approveFiledShow[field.field],
                                  class: fieldClass,
                                  id: field.title === '任务名称' ? 'task-long' : ''
                              })),
                              selected: false
                          }
                      })
                      pagination.value.total = data.data.totalElements
                  } else {
                      message.error(data.message)
                  }
              })
              .finally(() => {
                  mainLoading.value = false
              })
      }, 500) // 300ms 的防抖时间

      function debounce(func, delay) {
          let timer
          return function (...args) {
              clearTimeout(timer)
              timer = setTimeout(() => func.apply(this, args), delay)
          }
      }

      const activeChange = debounce(() => {
          console.log('activeChange triggered')
          pagination.value.current = 1
          checkName.value = ''
          getTagData()
      }, 300)
      function innerTabChange() {
          pagination.value.current = 1
          getApproveData()
      }
      // watch(
      //     () => activeKey.value,
      //     () => {
      //         let body = document.querySelector('.main')
      //         if (body) {
      //             if (activeKey.value === '已办事项' || activeKey.value === '我发起的') {
      //                 body.style.height = 'calc(100vh - 380px)'
      //             } else {
      //                 body.style.height = 'calc(100vh - 300px)'
      //             }
      //         }
      //     },
      //     { deep: true }
      // )
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }
  .vid_ut7t6yqnui :deep(a) {
        color: undefined;
      }
      :deep(.vid_ut7t6yqnui.@{ant-prefix}-breadcrumb) > span:last-child a {
        color: undefined;
        opacity: 0.75;
      }
  .vid_ut7t6yqnui{
      height:40px;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      flex-wrap:undefined;
      margin-bottom:24px;
      padding-left:24px;
      background-color:#FFFFFF
  }

  /*样式*/

      /*
      样式
      */
      .page_root {
          width: 100%;
          height: 100%;
          overflow: hidden;
      }
      .item-container {
          position: relative;
          margin-bottom: 10px;
          border: 1px solid #ccc;
          padding: 10px;
      }

      .item-content {
          display: flex;
          justify-content: space-between;
          border-left: 1px solid #d9d9d9;
          padding: 0 16px;
          flex: 1;
          display: flex;
          flex-direction: column;
      }
      .body {
          background-color: #fff;
          overflow: hidden;
          padding-bottom: 0;
          position: relative;
      }
      :deep(.ant3-tag-checkable) {
          background-color: #f0f2f5;
          height: 40px;
          padding: 10px 16px;
          flex-shrink: 0;
      }
      .sticky {
          position: sticky;
          left: 0;
          z-index: 1; /* 确保固定标签在其他标签之上 */
      }
      :deep(.ant3-tag-checkable-checked) {
          background-color: #d9e4fd;
          color: #3875ff;
          border-color: #3875ff;
          font-weight: 600;
      }
      .determine-div {
          margin-top: 20px;
      }
      .name-title {
          height: 20px;
          font-size: 16px;
          color: #3875ff;
      }
      .item {
          display: flex;
          background: #ffffff;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          margin-bottom: 16px;
          height: 112px;

          flex-direction: column;
      }

      .detail-batch {
          display: flex;
          justify-content: space-between;
      }
      .table-action {
          flex: 1;
      }
      .item-title,
      .item-main {
          text-align: left;
      }
      .item-main {
          max-width: 150px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          letter-spacing: 0;
          font-weight: 600;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          flex-shrink: 0;
      }
      .omit1 {
          max-width: 1200px;
      }
      .omit2 {
          max-width: 650px;
      }
      .omit3 {
          max-width: 420px;
      }
      .omit4 {
          max-width: 320px;
      }
      .omit5 {
          max-width: 260px;
      }
      .omit6 {
          max-width: 210px;
      }
      .omit7 {
          max-width: 150px;
      }
      .item-title {
          max-width: 150px;
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
      }
      .type-title {
          font-size: 16px;
          color: #3875ff;
          letter-spacing: 0;
          font-weight: 600;
          margin-bottom: 12px;
          position: relative;
          cursor: pointer;
      }
      .sub-daily {
          width: 88px;
          height: 28px;
          background: #52c41a;
          border: 1px solid #52c41a;
          border-radius: 2px;
          position: absolute;
          color: #fff;
          right: 0;
          top: 0;
          text-align: center;
          font-size: 14px;
          line-height: 28px;
      }
      .item-top {
          width: 100%;
          background-image: linear-gradient(270deg, rgba(56, 117, 255, 0) 0%, rgba(56, 117, 255, 0.2) 100%);
          border-radius: 4px 0 0 0;
          height: 40px;
          border-left: 4px solid #3875ff;
          padding: 10px 20px;
          margin-bottom: 10px;
          display: flex;
      }
      .item-inner {
          padding: 5px 16px;
          display: flex;
      }
      .detail-btn,
      .pass-btn,
      .reject-btn,
      .urg-btn,
      reject-btn {
          width: 64px;
          height: 28px;
          line-height: 28px;
          border-radius: 2px;
          text-align: center;
          cursor: pointer;
      }
      .detail-btn,
      .urg-btn {
          background: rgba(56, 117, 255, 0.1);
          border: 1px solid #3875ff;
          border-radius: 2px;
          color: #3875ff;
      }
      .pass-btn {
          background: rgba(82, 196, 26, 0.2);
          border: 1px solid #52c41a;
          border-radius: 2px;
          color: #52c41a;
      }
      .reject-btn {
          background: rgba(245, 34, 45, 0.1);
          border: 1px solid #f5222d;
          border-radius: 2px;
          color: #f5222d;
      }
      .sub-time {
          margin-right: 40px;
      }
      .sub-people {
          margin-right: 16px;
      }
      .urging {
          width: 44px;
          height: 19px;
          line-height: 19px;
          background: #fa5f00;
          border-radius: 2px;
          color: #fff;
          text-align: center;
          margin-left: 40px;
      }
      .top-tag {
          display: flex;
          flex-wrap: nowrap;
      }
      .top-tag-container {
          padding: 0 24px;
          overflow-x: auto;
          white-space: nowrap;
          display: flex;
          align-items: center;
          padding-bottom: 5px; /* 添加一些内边距以避免内容紧贴滚动条 */
          margin-bottom: 5px;
      }
      .top-tag-container::-webkit-scrollbar {
          height: 4px; /* 设置滚动条的高度 */
      }
      #myIframe {
          position: relative;
          margin-top: 20px;
      }
      .detail-content {
          display: flex;
          height: 100%;
      }
      .detail-left {
          flex: 1;
          margin-right: 16px;
      }
      .detail-right {
          width: 250px;
          padding: 16px 0;
          padding-left: 16px;
          border-left: 1px solid #d9d9d9;
      }
      .flow-path {
          color: #262626;
          font-weight: 600;
          height: 16px;
          line-height: 16px;
          border-left: 4px solid #3875ff;
          padding-left: 10px;
          margin-bottom: 10px;
      }
      .pagination-div {
          position: absolute;
          right: 30px;
          bottom: 0;
          padding: 10px;
          background: transparent; /* 可选：为背景添加颜色 */
      }
      .main {
          overflow: auto;
          height: calc(100vh - 330px);
          padding: 0 24px;
      }
      .default-font,
      .weight-font {
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
      }
      .weight-font {
          color: #262626;
          margin-right: 16px;
      }
      .in-progress,
      .approved,
      .reject,
      .revoke {
          width: 48px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          border-radius: 2px;
          background: #bed2ff;
          color: #3875ff;
      }
      .approved {
          background: #ddf4d2;
          color: #52c41a;
      }
      .reject {
          background: #ffd4cc;
          color: #ff2a00;
      }
      .revoke {
          background: #d4d4d4;
          color: #595959;
      }

      .title-new-status {
          display: flex;
          height: 36px;
          line-height: 36px;
          padding: 0 16px;
          margin-bottom: 16px;
          margin-top: 16px;
          background-image: url('@/assets/images/a17cccf1c48390c6d512a33e9fcfb8af.png');
          background-size: cover;
          border: 1px solid #3875ff;
          border-radius: 5px;
          justify-content: space-between;
      }

      :deep(.ant3-steps-item-container) {
          padding: 0 0 0 16px;
      }
      :deep(.ant3-steps-item-tail::after) {
          margin-left: 12px;
          background-color: #3875ff;
      }
      :deep(.ant3-steps-item-description) {
          font-size: 12px;
          color: #595959;
          text-align: left;
          line-height: 20px;
          font-weight: 400;
      }
      :deep(.ant3-steps-item-icon) {
          width: 24px;
          height: 24px;
          line-height: 24px;
          color: #3875ff;
          margin-top: 6px;
      }
      :deep(.ant3-steps-item-title) {
          height: 28px;
          font-size: 14px;
          color: #262626;
          text-align: left;
          line-height: 22px;
          font-weight: 400;
      }
      :deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
          background-color: #3875ff;
      }
      :deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
          background: #3875ff;
      }
      :deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
          border-color: #3875ff;
      }
      :deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
          color: #3875ff !important;
      }
      .task-status-new {
          cursor: pointer;
      }
      .left-title,
      .right-title {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          letter-spacing: 0;
          text-align: right;
          font-weight: 400;
      }
      .weight-status {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 500;
      }
      :deep(.ant3-tabs-nav-wrap) {
          padding: 0 24px;
      }
      .cover {
          position: absolute;
          width: 24px;
          background-color: #fff;
          height: 80px;
          left: 0;
      }
      .cover1 {
          background-color: #fff;
          width: 32px;
          height: 80px;
          position: absolute;
          right: 0;
      }
      .no-data-img {
          width: 264px;
          height: 192px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
      .no-data-msg {
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #595959;
      }
      #task-long {
          max-width: 400px;
      }
      /*样式*/
</style>